<template>
	<div class="hot-picturc">
		<div class="topBox">
			<div class="topBoxSon1">
				<p>书城管理 — <b>热点图片</b></p>
				<button class="el-icon-refresh-right" @click="refresh()"></button>
			</div>
		</div>
		<el-button @click="add()" style="display: flex;margin-left:5% ;color: white;background-color: #009688;margin: 20px 0 20px 5%;">添加新热点图片</el-button>
		<el-table 
		style="width: 90%; margin: 10px auto;" 
		:data="tableData" 
		:header-cell-style="{background:'#f2f2f2',color:'#606266'}" 
		border>
			<el-table-column label="描述" prop="memo" >
			</el-table-column>
			<el-table-column label="类型" width="100" prop="type">
			</el-table-column>
			<el-table-column label="优先级" width="150" prop="hot">
			</el-table-column>
			<el-table-column label="图片" prop="picture">
				<template slot-scope="scope">
					<el-image style="width: 10vh;height: 5vh;"
							  :src="`http://127.0.0.1/api/public/showimg/${scope.row.picture}`">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="管理" prop="gt">
				<template slot-scope="scope">
					<el-button @click="update(scope.row.id)" class="el-icon-edit" style="background-color: #1e9fff;color: white;border: none;">编辑</el-button>
					<el-button @click="remove(scope.row.id)" class="el-icon-delete" style="background-color: #ff5722;color: white;border: none;">删除</el-button>
				</template>	
			</el-table-column>
		</el-table>	
		<div class="bottomBox">
			<p>后台管理</p>
		</div>
	</div>
</template>

<script>
	export default {
			data(){
				return{
					tableData:[],
					types:{
						type:'',
						hot:'',
						memo:'',
						picture:''
					}
				}
			},
			methods: {
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
			},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
			},
			findHot(){
				this.$get("/api/adm/hot/findAll").then(
				(resp)=>{
					console.log(resp.data);
					this.tableData=resp.data.data;
				})
			},
			add(){
				this.$router.push({
					path:'/backendManage/addUpdateHotPicturc',
					query:{id:0}
				})
			},
			update(id){
				this.$router.push({
					path:'/backendManage/addUpdateHotPicturc',
					query:{id:id}
				})
			},
			remove(id){
				this.$get("/api/adm/hot/remove/"+id).then(
				(resp)=>{
					console.log(resp.data.data);
					this.$message("删除成功！！");
					this.findHot()
				})
			},
			refresh(){
				this.$router.go(0);
			}
		},
		mounted(){
			this.findHot();
		}
	}
</script>

<style scoped>
	.hot-picturc{
		width: 100%;
		height: 100%;
	}
	.topBox{
		width: 90%;
		margin: 0 auto;
		display: flex;
	}
	.topBoxSon1{
		width: 100%;
		height: 60px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #adaaa4;
	}
	.topBoxSon1 p{
		line-height: 60px;
		font-size: 20px;
		color: #aaa6a6;
	}
	.topBoxSon1 p b{
		font-weight: 400;
		line-height: 60px;
		font-size: 20px;
		color: #818181;
	}
	.topBoxSon1 button{
		display: flex;
		background-color: #009688;
		color: white;
		font-size: 20px;
		border: none;
		border-radius: 5px;
		height: 40px;
		width: 55px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		padding-left: 15px;
	}
	.bottomBox{
		display: flex;
		width: 100%;
		height: 50px;
		background-color: #D3D3D3;
		display: flex;
		position: absolute;
		bottom: 0;
	}
	.bottomBox p{
		font-size: 18px;
		line-height: 50px;
	}
	.col4{
		background-color: #393d49;
	}
		
</style>